@charset "UTF-8";





/*--------------------------------
-----------------------banner 部分
--------------------------------*/

#banner {
    position:relative;
}
#banner .wrapper {
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    margin-left:-605px;
    overflow:hidden;
    perspective:1000;
}
#banner p {
    position:absolute;
}
#banner p.txt1 {
    top:27.3%;
    left:112px;
    height:5.67%;
}
#banner p.txt2 {
    top:36.5%;
    left:113px;
    height:9%;
}
#banner p.txt3 {
    top:53.4%;
    left:28px;
    height:3.37%;
}
#banner p.txt4 {
    top:62.2%;
    left:0;
    height:9.92%;
}
#banner p img {
    height:100%;
    width:auto;
}
#banner > a > img {
    filter:blur(18px);
    -webkit-fliter:blur(18px);
    -ms-fliter:blur(18px);
    transition:2s;
}
#banner p img{
    filter:blur(6px);
    -webkit-fliter:blur(6px);
    -ms-fliter:blur(6px);
    transition:2s;
}

/*--------------------------------
---------------------展示模块 部分
--------------------------------*/


    /*--------------------------------
    ----------------------展示模块公用
    --------------------------------*/

.showmod {
    overflow:hidden;
    text-align:center;
    position:relative;
}
.showmod .showbox {
    border:1px solid transparent;
    padding:7px 8px 3px;
    overflow:hidden;
}
.showmod .showbox li {
    position:relative;
    width:200px;
    margin-bottom:8px;
    transition:.6s;
}
.showmod .showbox li p.title {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30px;
    line-height:30px;
    color:#fff;
    text-align:center;
    transition:.6s;
    background:rgba(0,0,0,.5)
}

        /*--------------------- 中间图片*/
.showmod .focus {
    margin:0 8px;
}
.showmod .focus li {
    width:359px;
}


        /*--------------------- 图片遮罩*/
.showmod a.shadow {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:none;
    background:url(../images/serve-shadow.png) repeat;
}
.showmod a.shadow p {
    line-height:1.1;
    text-align:center;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    opacity:0;
    transition:.6s;
}
.showmod a.shadow p .line {
    position:absolute;
    background:#fff;
}
.showmod a.shadow p .line-t {
    top:0;
    height:1px;
}
.showmod a.shadow p .line-b {
    bottom:0;
    height:1px;
}
.showmod a.shadow p .line-l {
    left:0;
    width:1px;
}
.showmod a.shadow p .line-r {
    right:0;
    width:1px;
}
.showmod a.shadow p span {
    display:inline-block;
    *display:inline;
    *zoom:1;
    height:100%;
    width:0;
    vertical-align:middle;
}

        /*----------------- 鼠标经过状态*/
.showmod .showbox li:hover p.title {
    height:0;
}
.showmod .showbox li:hover a.shadow p {
    opacity:1;
}

        /*----------- 图片右下、左下装饰*/
.showmod .showbox li:before {
    content:"";
    display:block;
    position:absolute;
    width:40%;
    height:5px;
    background:transparent;
    bottom:-5px;
}
.showmod .showbox li:after {
    content:"";
    display:block;
    position:absolute;
    width:5px;
    height:40%;
    background:transparent;
    bottom:-5px;
}
.showmod .showbox li.w-ab:before,.showmod .showbox li.w-ab:after {
    background:#a98251;
}


        /*--------------------- 文本部分*/

.showmod .introbox {
    overflow:hidden;
}
.showmod h2 {
    font-size:0;
    /*padding-bottom:21px;*/
    text-align:center;
}
.showmod h2 span {
    *display:none;
}
.showmod h2 .tit {
    margin:13px 0 21px;
}
.showmod .introbox p {
    color:#dbbd98;
    line-height:1;
}
.showmod .split {
    width:21px;
    height:2px;
    background:#dbbd98;
    margin:0 auto;
}
.showmod p {
    cursor:default;
}
.showmod p.top {
    margin:31px 0 36px;
}
.showmod p.story {
    line-height:20px;
}
.showmod p.en-story {
    margin:44px 0 67px;
}
.showmod a.seemore {
    display:block;
    width:99px;
    height:29px;
    margin:0 auto;
    background:#a98251;
    box-shadow:0 8px 8px rgba(0,0,0,.3);
    border:none;
    outline:none;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.showmod a.seemore .bg {
    position:absolute;
    z-index:2;
    top:0;
    right:99px;
    width:100%;
    height:100%;
    background:#a96551;
    transition:.6s;
}
.showmod a.seemore p {
    position:absolute;
    z-index:4;
    top:0;
    right:0;
    width:100%;
    height:100%;
    line-height:27px;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}
.showmod a.seemore:hover .bg {
    right:0;
}

#main {
    background:#fff url(../images/serve-mainbg.png) no-repeat;
}

/*--------------------------------
--------------------婚纱·礼服 部分
--------------------------------*/

#dresses {
    padding-top:74px;
    margin-bottom:87px;
    opacity:0;
}
#dresses .showbox {
    border-left-color:#a98251;
    border-bottom-color:#a98251;
}
#dresses .introbox {
    width:360px;
    height:560px;
    text-align:center;
    padding-top:58px;
    position:relative;
}
#dresses a.shadow p {
    width:70%;
    height:13.3%;
    margin-left:-35%;
    margin-top:-6.7%;
}
#dresses .showbox li:before ,#dresses .showbox li:after {
    right:-5px;
}


/*--------------------------------
-------------------------场景 部分
--------------------------------*/
#sence {
    margin-bottom:111px;
    height:679px;
}
#sence .wrapper {
    position:relative;
    height:679px;
    overflow:hidden;
}
#sence .left,#sence .right {
    width:579px;
}
#sence .introbox {
    height:318px;
    width:579px;
}
#sence .showbox {
    padding:0;
}
#sence .introbox p.top {
    margin:33px 0 27px;
}
#sence .introbox .split {
    margin-bottom:24px;
}
#sence .showbox li {
    width:579px;
    height:341px;
}
#sence .showbox li img {
    width:579px;
    height:341px;
}
#sence p.en-story {
    margin:103px 0 73px;
}
#sence .middle {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-64px;
    margin-left:-159px;
    width:319px;
    height:129px;
    border:1px solid #a98251;
    overflow:hidden;
    background:rgba(255,255,255,.5)
}
#sence .middle h2 {
    margin-top:22px;
}
#sence a.shadow p {
    width:244px;
    height:110px;
    margin-top:-55px;
    margin-left:-122px;
    perspective:1000;
    -webkit-perspective:1000;
}
#sence a.shadow p svg {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%);
}
#sence a.shadow p b {
    position:absolute;
    top:50%;
    display:block;
    height:22px;
    font-size:22px;
    font-weight:100;
    transition:.8s;
    transform:scale(.6) rotateX(0deg);
}
#sence a.shadow p b.left-t {
    margin-top:-22px;
    right:60%;
}
#sence a.shadow p b.right-b {
    left:50%;
}
#sence li a.shadow:hover p b {
    transform:scale(1) rotateX(360deg);
    font-size:22px;
}

#sence .introbox, #sence .showbox {
    position:absolute;
    opacity:0;
}
#sence .left .introbox, #sence .left .showbox {
    left:-1000px;
}
#sence .left .introbox {
    top:0;
}
#sence .left .showbox {
    bottom:0;
}

#sence .right .introbox, #sence .right .showbox {
    right:-1000px;
}
#sence .right .introbox {
    width:579px;
    bottom:0;
}
#sence .right .showbox {
    top:0;
}

/*--------------------------------
-------------------------妆面 部分
--------------------------------*/


#face .introbox {
    width:391px;
    height:685px;
    overflow:hidden;
}
#face h2 {
    margin-top:105px;
}

#face .showbox {
    padding-left:15px;
    padding-right:8px;
    border-right-color:#a98251;
    border-bottom-color:#a98251;
    background:#fff;
}
#face ul {
    overflow:hidden;
    *overflow:visible;
    padding-left:3px;
}
#face ul.b-left {
    margin-right:6px;
}
#face ul.top li {
    float:left;
    margin-left:6px;
}
#face ul.top li:first-child {
    margin-left:0;
}
#face ul.top li {
    width:174px;
    height:160px;
}
#face ul.b-left li {
    width:210px;
    height:145px;
}
#face ul.b-right li {
    width:318px;
    height:298px;
}

#face li.w-shadow a.shadow {
    display:block;
}
#face .showbox li:before ,#face .showbox li:after {
    left:-3px;
}
#face .showbox li:before {
    height:3px;
}
#face .showbox li:after {
    width:3px;
}


    /*--------------------------------
    ------------------------立方体 部分
    --------------------------------*/
#face .rect-wrap{
    perspective:1600;
    -webkit-perspective:1600;
    position:relative;
}
#face .container {
    width:800px;
    height:685px;
    transform-style:preserve-3d;
    transform-origin:center center -285px;
}
#face .container .showbox {
    position:absolute;
    top:90px;
    width:545px;
    height:480px;
}

#face .container .front {
    left:115px;
    transform:translateZ(0);
}
#face .container .le {
    left:-455px;
    transform: rotateY(-90deg);
    transform-origin:right; 
}
#face .container .rig {
    left:685px;
    transform:rotateY(90deg);
    transform-origin:left; 
}
#face .container .back {
    left:115px;
    transform:translateZ(-570px) rotateY(180deg);
}
@keyframes rotate-frame {
    0% {
        transform:rotateY(0deg);
    }
    25% {
        transform:rotateY(90deg);
    }
    50% {
        transform:rotateY(180deg);
    }
    75% {
        transform:rotateY(270deg);
    }
    100% {
        transform:rotateY(360deg);
    }
}
#face .container {
    animation: rotate-frame 10s linear infinite;
}

    /*--------------------------------
    --------------------内部立方体 部分
    --------------------------------*/
 
#face ul li {
    perspective:800;
    -webkit-perspective:800;
    position:relative;
}
#face li .contain {
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transform-origin:center center -285px;
    transition:.6s;
}
#face li .contain .li-face {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}


/*--------------------------------
-------------------------流程 部分
--------------------------------*/


#process {
    padding-top:78px;
    padding-bottom:111px;
}
#process p.top {
    margin:20px 0 16px;
}
#process p.en-story {
    margin:0 0 68px;
}
#process .processimg {
    position:relative;
    height:429px;
    background:url(../images/serve-process-line.png) 120px 65px no-repeat;
}
#process .p-item {
    width:119px;
    height:129px;
    top:0px;
    text-align:center;
    position:absolute;
    background:url(../images/serve-process-cicle.png) center bottom no-repeat;
    cursor:pointer;
}
#process .p-item img {
    margin-left:10px;
    position:relative;
}
#process .p-item h4 {
    font-size:14px;
    line-height:1;
    color:#676767;
    padding:12px 0 4px;
    transition:1s;
}
#process .p-item .smalllogo {
    width:69px;
    height:16px;
    margin:0 auto;
    line-height:16px;
    color:#fff;
    font-size:12px;
    background:#a96551;
    border-radius:1px;
    position:relative;
    perspective:1000;
    -webkit-perspective:1000;
}
#process .p-item .smalllogo p {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#a98251;
    transition:.6s;
}
#process .item1 {
    left:205px;
    top:188px;
}
#process .item2 {
    left:37px;
}
#process .item3 {
    left:373px;
}
#process .item4 {
    left:542px;
    top:92px;
}
#process .item5 {
    left:708px;
}
#process .item6 {
    left:1045px;
}
#process .item7 {
    left:876px;
    top:188px;
}
#process .p-item:hover h4 {
    text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #a98251,0 0 5px #a98251;
}
#process .p-item:hover > img {
    animation:bounce 1s;
}
#process .p-item:hover .smalllogo p {
    opacity:0;
    transform:rotateX(180deg);
    transform-origin:top; 
}
@keyframes bounce {
    0% { top : 0;}
    20% { top : -20px;}
    30% { top : 0;}
    50% { top : -10px;}
    60% { top : 0;}
    80% { top : -5px;}
    90% { top : 0;}
    97% { top : -2px;}
    100% {top : 0;}
}

#process .p-item .innerBox {
    width:130px;
    height:160px;
    /*background:#a98251;*/
    position:absolute;
    bottom:-160px;
    left:0px;
    display:none;
}
#process .p-item .innerBox svg {
    position:absolute;
    top:0;
    left:0;
}
#process .p-item .innerBox svg rect {
    stroke:#a98251;
    stroke-width:2px;
    stroke-dasharray:572;
    stroke-dashoffset:572;
}
#process .p-item .inner {
    width:100%;
    height:100%;
    opacity:0;
    background:#a98251;
}

@keyframes anim-dash {
    0% {
        stroke-dashoffset: 580;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes anim-dash {
    0% {
        stroke-dashoffset: 580;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#process .p-item .inner {
    color:#fff;
    font:12px;
    text-align:left;
    letter-spacing:2px;
}
#process .p-item .inner h5 {
    padding:16px 16px 8px;
    line-height:1;
    font-size:16px;
}
#process .p-item .inner p {
    line-height:1.2;
    padding:0 20px;
    text-indent:12px;
}
#process .p-item:hover .inner h5 {
    -webkit-animation: anim-elem-1 0.7s ease-out both;
    animation: anim-elem-1 0.7s ease-out both;
}

#process .p-item:hover .inner p {
    -webkit-animation: anim-elem-2 0.7s ease-out both;
    animation: anim-elem-2 0.7s ease-out both;
}

@-webkit-keyframes anim-elem-1 {
    0% { opacity: 0; -webkit-transform: translate3d(-150px, 0, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-elem-1 {
    0% { opacity: 0; -webkit-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes anim-elem-2 {
    0% { opacity: 0; -webkit-transform: translate3d(150px, 0, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-elem-2 {
    0% { opacity: 0; -webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

#process .wrapper {
    position:relative;
}
#process .decorate {
    position:absolute;
    top:-55px;
    left:-110px;
}

/*--------------------------------
-----------------------侧边栏 部分
--------------------------------*/

#fixsider {
    position:fixed;
    bottom:30%;
    right:2.7%;
}

#fixsider li {
    position:relative;
    margin-bottom:1px;
}
#fixsider li a {
    display:block;
    width:33px;
    height:33px;
    border-radius:3px;
}
#fixsider li.weixin a {
    background:#a4a4a4 url(../images/serve-weixin.png) center center no-repeat;
}
#fixsider li.weibo a {
    background:#a4a4a4 url(../images/serve-weibo.png) center center no-repeat;
}
#fixsider li.tel a {
    background:#a4a4a4 url(../images/serve-tel.png) center center no-repeat;
}
#fixsider li.totop a {
    background:#a4a4a4 url(../images/serve-totop.png) center center no-repeat;
}
#fixsider li span {
    position:absolute;
    display:none;
    right:33px;
    top:0;
    height:33px;
    width:0;
    line-height:33px;
    text-align:center;
    color:#fff;
    font-size:16px;
    padding:0 12px;
    background:#a98251;
    border-radius:3px 0 0 3px;
}
#fixsider li:hover a {
    background-color:#a98251;
    border-radius:0 3px 3px 0;
}